<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景的绘制区域</title>

        <style type="text/css">
            .wrapper {
                width: 500px ; /* width: 600px ; */
                height: 350px ; /* height: 450px ; */
                padding: 25px ;
                border: 25px double blue ; margin: 25px auto ;
                background: url("code.webp") no-repeat center ;
            }

            .wrapper>div {
                height: 340px ;
                border: 5px solid rgba( 255 , 0 , 0  , 0.5) ;
                font-size: 50px ;
                color: white ;
                text-shadow: 0 0 5px red ;
                text-align: center ;
            }

            .first {
                /* background-clip 是 CSS 3 新增属性 */
                background-clip: border-box ; /* 背景被裁剪到边框盒 （默认值）*/
            }

            .second {
                background-clip: padding-box ; /* 背景被裁剪到内边距框 */
            }

            .third {
                background-clip: content-box ; /* 背景被裁剪到内容框 */
            }
        </style>

    </head>
    <body>

        <div class="wrapper first">
            <div> border-box </div>
        </div>
        <div class="wrapper second">
            <div> padding-box </div>
        </div>
        <div class="wrapper third">
            <div>content-box</div>
        </div>
        
    </body>
</html>